<template>
  <div class="relative bg-gray_bg">
    <div class="sticky top-0 left-0px w-100vw bg-white p-16px flex items-center">
      <div class="border border-primary p-8px rounded-4px flex items-center">
        <div class="text-12px mr-8px" @click="drawer = true">
          {{
            targetCategoryId
              ? categoryList.find((item) => item.value === targetCategoryId)?.text
              : '全部产业链'
          }}
        </div>
        <el-icon class="!w-12px !h-12px"><ArrowDown /></el-icon>
      </div>
      <!-- <el-select v-model="value" placeholder="Select" size="small" /> -->
    </div>
    <div class="p-16px">
      <Menu @click="$router.push('/bidding/detail')" />
      <Menu />
      <Menu />
      <Menu />
    </div>
  </div>

  <van-popup v-model:show="drawer" position="bottom" :style="{ height: '40%' }">
    <van-picker :columns="categoryList" @confirm="onChange" />
  </van-popup>
</template>

<script setup>
import { ref } from 'vue'
import Menu from './components/menu.vue'
import { useConfigStore } from '@/stores/config'

const targetCategoryId = ref()
const drawer = ref(false)
const categoryList = ref([])

const init = async () => {
  const config = useConfigStore()
  const list = await config.initChainTree()
  categoryList.value = [
    {
      text: '全部产业链',
      value: null,
    },
    ...list.map((item) => {
      return {
        text: item.name,
        value: item.id,
      }
    }),
  ]
}

init()

const onChange = (e) => {
  targetCategoryId.value = e.selectedValues[0]
  drawer.value = false
}
</script>

<style lang="scss" scoped>
:deep .el-drawer__header {
  height: 0 !important;
}
</style>
